<template>
	<view class="news-container">
		<!-- 表头区域 -->
		<view class="header">
			<view class="nav-bar">
				<text class="nav-item active">要闻</text>
				<text class="nav-item">推荐</text>
				<text class="nav-item">关注流</text>
				<text class="nav-item">24小时</text>
				<text class="nav-item">娱乐</text>
				<text class="nav-item">福建</text>
				<text class="nav-item">财经</text>
				<text class="nav-item">生活</text>
				<text class="nav-item">科技</text>
				<text class="nav-item">军事</text>
				<text class="nav-item">体育</text>
				<text class="nav-item">汽修</text>
				<text class="nav-item">健康</text>
				<text class="nav-item">国际</text>
				<text class="nav-item">千里眼</text>
				<text class="nav-item">5G</text>
			</view>

			<view class="weather-search">
				<view class="weather-info" v-if="weatherData.length >= 2">
					<text>明天：{{ cityInfo.parent }} {{ cityInfo.city }} {{ weatherData[1].ymd }}
						{{ weatherData[1].week }} {{ weatherData[1].high }}
						{{ weatherData[1].low }} </text>
				</view>
				<text class="weather-info" v-else>加载中...</text>
				<input class="search-box" placeholder="搜索关键词" />
			</view>

			<view class="update-tip" v-if="showUpdateTip">为您更新了15条内容</view>
		</view>

		<view v-for="(item, index) in newsList" :key="item.nID" style="padding: 5rpx;background-color: #eee;">
			<CustomTextView :title="item.title" :isTop="item.isTop" :author="item.author" :comments="item.comments"
				:time="item.time" :mode="item.newstype" :image="item.imagelist[0]" :imagelist="item.imagelist"
				:images="item.imagelist" :showSearch="item.showSearch" :bgColor="item.bgcolor">
				<template v-slot:tips>
						<!-- 只有showSearch为true时才显示插槽内容 -->
					<view class="slotcontent" v-if="item.showSearch">
						<text>搜索：</text>
						<view class="borderbox"><text>今日金价</text></view>
						<view class="borderbox"><text>精选好物</text></view>
					</view>
				</template>
			</CustomTextView>
		</view>
	</view>
</template>

<script>
	import data from "../../data/news.json"
	import CustomTextView from "../../components/cardViewText.vue"
	export default {
		components: {
			CustomTextView
		},
		data() {
			return {
				newsList: [],
				weatherData: [],
				cityInfo: {},
				formattedOuterDate: "",
				showUpdateTip: true, // 控制更新提示显示
				updateTipTimer: null // 定时器实例
			}
		},
		onLoad() {
			//this.newsList = getApp().globalData.datalist;
			//console.log("onLoad--> newsList: " + this.newsList.length);
			this.newsList = data.newslist;
			this.fetchData();
			// 页面加载时启动3秒后隐藏提示
			this.startUpdateTipTimer();
		},
		// 下拉刷新生命周期函数
				onPullDownRefresh() {
					console.log("下拉刷新触发");
					// 显示更新提示
					this.showUpdateTip = true;
					// 模拟数据刷新过程 - 实际项目中应该请求新数据
					setTimeout(() => {
						// 模拟刷新数据，仍然只取前15条（可以打乱顺序模拟新数据）
						// 这里使用slice(0,15)确保始终只显示15条
						this.newsList = [...data.newslist].slice(0, 15); 
						this.fetchData(); // 刷新天气数据
						uni.stopPullDownRefresh(); // 停止下拉刷新动画
						// 重启3秒后隐藏提示
						this.startUpdateTipTimer();
					}, 1500);
				},
				// 页面卸载时清除定时器
				onUnload() {
					if (this.updateTipTimer) {
						clearTimeout(this.updateTipTimer);
					}
				},
		methods: {
			fetchData() {
				this.fetchWeather();
			},
			fetchWeather() {
				uni.request({
					url: "http://t.weather.sojson.com/api/weather/city/101230501",
					method: "GET",
					timeout: 10000,
					success: (res) => {
						if (res.statusCode === 200 && res.data.status === 200) {
							const forecast = res.data.data.forecast;
							this.weatherData = forecast.slice(0, 2);
							this.cityInfo = res.data.cityInfo;
							const outerDate = res.data.date;
							this.formattedOuterDate =
								`${outerDate.slice(0, 4)}-${outerDate.slice(4, 6)}-${outerDate.slice(6, 8)}`;
						} else {
							uni.showToast({
								title: "天气数据解析失败",
								icon: "none"
							});
						}
					},
					fail: (err) => {
						console.error("天气请求异常：", err);
						uni.showToast({
							title: "网络波动，请重试",
							icon: "none"
						});
					}
				});
			},
			// 启动更新提示隐藏定时器
			startUpdateTipTimer() {
				// 先清除之前的定时器，避免重复
				if (this.updateTipTimer) {
					clearTimeout(this.updateTipTimer);
				}
				// 3秒后隐藏提示
				this.updateTipTimer = setTimeout(() => {
					this.showUpdateTip = false;
				}, 3000);
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.news-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		background-color: #d93f3f;
		color: #fff;
	}

	.nav-bar {
		display: flex;
		padding: 10rpx 0;
		overflow-x: auto;
	}

	.nav-item {
		font-size: 28rpx;
		padding: 0 15rpx;
		white-space: nowrap;
	}

	.nav-item.active {
		font-weight: bold;
		border-bottom: 2rpx solid #fff;
	}

	.weather-search {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 15rpx 20rpx;
	}

	.weather-info {
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.search-box {
		width: 300rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
	}

	.update-tip {
		background-color: #ff9933;
		text-align: center;
		padding: 10rpx 0;
		font-size: 24rpx;
	}

	.slotcontent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding-left: 10px;
		color: #aaf;
		font-size: 20rpx;
	}

	.borderbox {
		margin: 5px;
		border-radius: 5px;
		border: 1px solid gray;

	}
</style>